<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <!-- 头部紫色背景 -->
      <div class="header_bg"></div>
      <!-- 信息卡片 -->
      <div class="header_card">
        <div class="user_img">
          <img
            :src="userData.userFace"
            alt=""
            style="
              display: block;
              height: 100%;
              width: 100%;
              border-radius: 50%;
            "
          />
        </div>
        <div class="user_name">{{ userData.username }}</div>
        <div class="user_slogan">可可喜欢家，家喜欢干净</div>
        <div class="flex">
          <div class="flex_item">
            <div class="item_head">已完成</div>
            <div class="item_content">110</div>
          </div>
          <div class="flex_item">
            <div class="item_head">待服务</div>
            <div class="item_content">110</div>
          </div>
          <div class="flex_item">
            <div class="item_head">已支付</div>
            <div class="item_content">110</div>
          </div>
          <div class="flex_item">
            <div class="item_head">余额</div>
            <div class="item_content">{{ userData.balance }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 功能列表 -->
    <div class="content">
      <div
        class="content_item"
        v-if="userData.certificationStatus == '已实名认证'"
        @click="toShiming"
      >
        实名认证
        <span style="float: right; font-size: 20px">></span>
      </div>
      <div class="content_item" @click="dialogShow=true">
        提现
        <span style="float: right; font-size: 20px">></span>
      </div>
      <div class="content_item" @click="toEarning">
        收益信息
        <span style="float: right; font-size: 20px">></span>
      </div>
      <div class="content_item" @click="toDetail">
        个人信息
        <span style="float: right; font-size: 20px">></span>
      </div>
    </div>
    <!-- 退出按钮 -->
    <div class="logout" @click="logout">退出登录</div>

    <!-- 提现模态框 -->
    <van-dialog v-model="dialogShow" title="提现" show-cancel-button  @confirm='withdraw'>
        <van-field type="number" label="金额" placeholder="提现金额" v-model="withdrawNum"/>
    </van-dialog>
  </div>
</template>

<script>

import { get, post } from "@/http/axios";

export default {
  data() {
    return {
    //   用户数据
      userData: {},
    //   提现金额
      withdrawNum:'',
    //   模态框打开和关闭
      dialogShow:false
    };
  },
  computed: {},
  methods: {

    //   获取用户数据
    async getUserData() {
      var token = localStorage.getItem("token");
      let res = await get("/user/info", { token });
      this.userData = res.data.data;
      
    },
    //跳转到实名认证
    toShiming() {
      this.$router.push({
        path:'/authentication',
        query:{
          id:this.userData.id
        }
      });
    },
    //确认提现
    async withdraw(){
        
        let data = {
            userId:this.userData.id,
            applyType:'提现',
            money:this.withdrawNum
        }
        if(this.withdrawNum){
          let res =  await post('/accountApply/submitAccountApply',data)
        }
        this.withdrawNum=''
    },
    //跳转到收益页面
    toEarning(){
        this.$router.push('/manager/earning')
    },
    //跳转到详情页面
    toDetail(){
        this.$router.push('/authentication_details')
    },
    //退出
    logout(){
        localStorage.clear('token')
        this.$router.push('/login')
    }
  },
  created() {
    this.getUserData();
  },
};
</script>

<style lang="scss" scoped>
.header_bg {
  height: 180px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.header_card {
  width: 80%;
  height: 170px;
  background-color: #fff;
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  box-shadow: 0 0 10px #ccc;
  border-radius: 8px;
  padding: 0 1em;
  .user_img {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background-color: #bf73ff;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .user_name {
    width: 50%;
    margin: 0 auto;
    margin-top: 3.5em;
    text-align: center;
  }
  .user_slogan {
    color: #7579ff;
    width: 50%;
    margin: 0 auto;
    margin-top: 0.5em;
    text-align: center;
    font-size: 12px;
  }
  .flex {
    display: flex;
    justify-content: space-around;
    margin-top: 1em;
    .flex_item {
      width: 24%;
      height: 40px;
      text-align: center;
      cursor: pointer;
      .item_head {
        font-size: 11px;
        color: #999;
      }
      .item_content {
        font-size: 22px;
        margin-top: 2px;
        color: #7579ff;
      }
    }
  }
}
.content {
  margin-top: 116px;
  padding: 0.5em 2em;
  .content_item {
    border-bottom: 1px solid #f9f6f6;
    padding: 1em 0;
    color: #999;
    font-size: 14px;
    cursor: pointer;
  }
}
.logout {
  width: 53%;
  height: 40px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  text-align: center;
  color: #fff;
  border-radius: 22px;
  line-height: 40px;
  margin: 0 auto;
  margin-top: 2em;
  cursor: pointer;
  margin-bottom: 5em;
}
</style>